<div>
  <h2>{{ operation === 'update' ? 'Update Customer' : 'New customer' }}</h2>
  <div class="field">
    <label for="firstname">Name</label>
    <input
      [(ngModel)]="customer.name"
      id="firstname"
      pInputText
      placeholder="Jane"
      type="text"
      class="w-full"
    >
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input
      [(ngModel)]="customer.email"
      id="email"
      pInputText
      placeholder="Jane@amigoscode.com"
      type="email"
      class="w-full"
    >
  </div>
  <div class="field">
    <label for="age">Age</label>
    <input
      [(ngModel)]="customer.age"
      id="age"
      pInputText
      placeholder="34"
      type="number"
      class="w-full"
    >
  </div>
  <div class="field" *ngIf="operation === 'create'">
    <label for="password">Password</label>
    <input
      [(ngModel)]="customer.password"
      id="password"
      pInputText
      placeholder="Password"
      type="password"
      class="w-full"
    >
  </div>
  <div class="field" *ngIf="operation === 'create'">
    <label for="gender">Gender</label>
    <select
      [(ngModel)]="customer.gender"
      class="p-dropdown w-full custom-select"
      id="gender"
    >
      <option value="">Select an option</option>
      <option value="MALE">MALE</option>
      <option value="FEMALE">FEMALE</option>
    </select>
  </div>
  <button
    [disabled]="!isCustomerValid"
    (click)="onSubmit()"
    pButton
    label="Submit"
    class="w-full"
  ></button>
  <button
    (click)="onCancel()"
    pButton
    label="Cancel"
    class="w-full p-button-outlined p-button-danger mt-2"
  ></button>
</div>
